<template>
  <div class="success" :style="'height: ' + maxHeight + 'px'">
    <Header title="支付成功" replaceUrl="/" />

    <div class="order">
      <img src="@/assets/logo.png" alt="" />
      <span class="title">订单支付成功</span>
      <nut-price
        :price="orderData.payAmount"
        size="normal"
        position="after"
        symbol="元"
      />
    </div>

    <div class="btn">
      <nut-button
        type="primary"
        @click="
          $router.replace({
            path: '/order/detail',
            query: {
              orderId: orderData.id,
            },
          })
        "
        >查看订单</nut-button
      >
      <nut-button type="primary" @click="$router.replace('/')"
        >返回首页</nut-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const { proxy } = getCurrentInstance();

const maxHeight = ref(`${document.documentElement.clientHeight}` - 45);

// 订单信息
const orderData = reactive({});

// 页面加载完毕
onMounted(() => {
  proxy.$orderApi.order.infoByOrderSn(route.query.out_trade_no).then((res) => {
    Object.assign(orderData, res.data);
  });
});
</script>

<style lang="less" scoped>
.success {
  margin-top: 45px;
  background: #fff;
  .order {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    img {
      width: 40px;
      height: 40px;
    }
    .title {
      margin: 10px 0px;
    }
  }
  .btn {
    padding: 0px 20px;
    display: flex;
    justify-content: space-around;
    :deep(.nut-button) {
      display: flex;
      font-size: 13px;
      align-items: center;
    }
  }
}
</style>